<template>
  <div>
    <template v-for="order in orders">
      <order-item
          :key="order.id"
          :id="order.id"
          :addr="order.address"
          :time="order.orderTime"
          :status="order.status"
          :books="order.books"
          @pay="pay"
          @confirm="confirm"
          @del="del"
      />
    </template>
  </div>
</template>

<script>
import axios from "axios";
import OrderItem from "@/components/Orders/OrderItem";

export default {
  name: "OrdersView",
  components: {OrderItem},
  data() {
    return {
      orders: []
    }
  },
  methods: {
    async fetchBook(id) {
      let res = await axios.get(`/api/book/fetch?id=${id}`);
      return res.data
    },
    async fetchOrders() {
      let res = await axios.get('/api/order/fetch');
      return res.data;
    },
    async expendOrder(order) {
      let books = []
      for (const i of order.books) {
        let book = await this.fetchBook(i.bookId)
        let item = {
          id: book.id,
          title: book.title,
          price: book.price,
          count: i.cnt,
          img: book.imgUrl
        }
        books.push(item)
      }

      return {
        ...order,
        books
      }
    },
    async refresh() {
      let orders = await this.fetchOrders();
      return await Promise.all(orders.map(val => this.expendOrder(val)))
    },
    waitForRefresh() {
      this.refresh().then(val => {
        this.orders = val
      })
          .catch(e => {
            console.log(e);
            this.$message({
              message: "未知的错误",
              type: "error"
            });
          })
    },
    pay(id) {
      axios.post(`/api/order/pay`, {id})
          .then(() => {
            this.$message({
              message: '支付成功！',
              type: "success"
            });
            this.waitForRefresh()
          })
          .catch(e => {
            if (e.response) {
              this.$message({
                message: `未知的服务器错误 代码${e.response.status}`,
                type: "error"
              });
            } else {
              this.$message({
                message: `未知的错误`,
                type: "error"
              });
            }
          })
    },
    confirm(id) {
      axios.post(`/api/order/confirm`, {id})
          .then(() => {
            this.$message({
              message: '操作成功！',
              type: "success"
            });
            this.waitForRefresh()
          })
          .catch(e => {
            if (e.response) {
              this.$message({
                message: `未知的服务器错误 代码${e.response.status}`,
                type: "error"
              });
            } else {
              this.$message({
                message: `未知的错误`,
                type: "error"
              });
            }
          })
    },
    del(id) {
      axios.post(`/api/order/del`, {id})
          .then(() => {
            this.$message({
              message: '删除成功！',
              type: "success"
            });
            this.waitForRefresh()
          })
          .catch(e => {
            if (e.response) {
              this.$message({
                message: `未知的服务器错误 代码${e.response.status}`,
                type: "error"
              });
            } else {
              this.$message({
                message: `未知的错误`,
                type: "error"
              });
            }
          })
    }
  },
  beforeMount() {
    this.waitForRefresh()
  }
}
</script>

<style scoped>

</style>